<template>
    <!-- <div v-bind:class="c1Class">第一个div</div> -->
    <!-- class绑定 -->
    <!-- 可以当做属性绑定来实现 -->
    <div :class="c1Class">第一个div</div>

    <!-- 绑定对象 -->
    <!-- 当flag的值为true的时候,引入ok的样式 -->
    <div :class="{ ok: flag }">第二个div</div>
    <!-- 可以与class属性同时存在 -->
    <div class="c1" :class="{ ok: flag }">第二个div</div>
    <!-- 
    当flag的值为true时执行error的样式
    当!flag的值为true,即flag的值为false的时候,执行error的样式
-->
    <div :class="{ error: flag, ok: !flag }">第三个div</div>
    <!-- 
    需求:当用户输入的数据长度为6-12位时显示ok样式,否则显示error样式
 -->
    <input type="text" :class="{ ok: status, error: !status }" @input="check($event.target.value)">
    <!-- 其值可以是一个数组 -->
    <div :class="[c1Class, okClass]">第四个div</div>

    <!-- style绑定 -->
    <p :style="{ color: color, 'font-size': fontSize }">第一个段落</p>
    <!-- 当属性名与属性值完全相同时,可以直接写属性名,省略属性值 -->
    <p :style="{ color, 'font-size': fontSize }">第二个段落</p>
</template>
<script setup>
import { ref } from 'vue';

const c1Class = ref('c1')
const okClass = ref('ok')
const errorClass = ref('error')
const flag = ref(true)

const status = ref(true)
function check(value) {
    status.value = value.length >= 6 && value.length <= 12
}

const color = ref('red')
const fontSize = ref('32px')

</script>
<style>
.c1 {
    font-size: 2rem;
}

.ok {
    color: green;
}

.error {
    color: red;
}
</style>